<template>
  <div>
    <div style="line-height: 50px">
      <span style="margin-left: 20px; font-size: 16px;">流程设计器&nbsp;/&nbsp;{{title}}</span>
      <span style="float: right; margin-right: 20px;">
        <el-button @click="handleSave">保存</el-button>
        <el-button @click="handleDeploy">部署(先保存)</el-button>
      </span>
    </div>
    <Modeler ref="modeler" :params="params"/>
  </div>
</template>


<script>
import Modeler from './components/Modeler'
import {getModelXml, getById} from '../api/model'
import {MessageBox} from "element-ui";
import {mapActions} from "vuex";

export default {
  components: {
    Modeler
  },
  watch: {
  },
  data() {
    return {
      params: undefined,
      dialogVisible: true,
      model:{}
    };
  },
  mounted() {
    this.init();
  },
  computed:{
    title() {
      return this.params?this.params.row.name:'';
    }
  },
  methods: {
    ...mapActions('model', ['getList', 'deleteModel', 'deploy']),
    async init() {
      const id = this.$route.query.id;
      const modelResult = await getById(id)
      this.model = modelResult.obj
      // 到后台请求xml文件
      const result = await getModelXml(id)
      this.params = {}
      this.params.bpmnXml = result.remark;
      this.params.row = this.model
      this.params.id = this.model.id
    },
    handleSave() {
       this.$refs.modeler.saveXML()
    },
    handleDeploy() {
      this.deploy({
        modelId: this.model.id,
        success: (r) => {
          if(r.success) {
            this.$message.success(r.content);
          }else{
            this.$message.error(r.content);
          }
        }
      })
    },

  }
};
</script>
<style>
</style>
